<?php
$id = substr(md5(mt_rand()), 0, 6);
?>
<div style='position:relative;' class='seccode cb' id="div_{$id}">
	<input id="input_{$id}" type="text" name="seccode" style="color:#ccc;width:40px;float:left" maxlength=4 />&nbsp;
	<div style="float:left">
		&nbsp;{:gTpl::button('refresh', 'changesec')}
	</div>
	{:gTpl::highlight('请输入4个中文的<i>拼音首字母</i><br />(五笔用户亦可输入4个中文)')}
	<script>
		$("#input_{$id}").attr('value', '{%seccode}');
		$('#div_{$id} .ui-state-highlight').hide();
		$("#input_{$id}").focus(function() {
			var $sec = $('#sec_{$id}');
			$('#div_{$id} .ui-state-highlight').show();
			if($sec.size()>0) {
				$sec.show();
				if($(this).attr('value').length!=4) $(this).attr('value', '');
				$(this).css('color', '');
			} else {
				$('#div_{$id}').append('<img src="{:gTpl::$path}images/loader.gif" style="position:absolute;left:18px;top:-5px" />');
				$(this).attr('disabled', true);
				$sec = $('<img id="sec_{$id}" />');
				$sec.attr('src', '{:U("seccode/")}?r='+Math.random())
					.css({position: 'absolute', left:0, top:-50})
					.load(function() {
						$('#div_{$id} img').remove();
						$(this).appendTo($('#div_{$id}')).show();
						$("#input_{$id}").attr('disabled', false).focus();
					});				
				$(this).css('color', '');
				$(this).attr('value', '');
			}
		}).blur(function() {
			$('#div_{$id} .ui-state-highlight').hide();
			$("#sec_{$id}").hide();
			//setTimeout('$("#sec_{$id}").hide();', 1);
		})//end of $input
		$('#div_{$id} a').click(function() {
			$('#sec_{$id}').remove();
			$("#input_{$id}").focus();
		})
		var $sec = $('<img id="sec_{$id}" />').hide();
		$sec.attr('src', '{:U("seccode/")}?r='+Math.random())
			.css({position: 'absolute', left:0, top:-50})
			.load(function() {
				$('#div_{$id} img').remove();
				$(this).appendTo($('#div_{$id}'));
				$("#input_{$id}").attr('disabled', false);
			});

	</script>
</div>